<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">专项扣除</block>
		</cu-custom>
		<view class="padding">
			<view class="bg-white radius-lg collapse">
				<view class="cu-bar solid-bottom ">
					<view class="action">
						<text class="cuIcon-titles text-green"></text>
						<text class="text-xl text-bold">子女教育</text>
					</view>
					<view class="action">
						<view class="text-price margin-right text-bold text-xl">{{childsEducPrice}}</view>
						<switch style="transform:scale(0.9)" @change="switchChildsEduc"
							:class="childsEducCheck?'checked':''" :checked="childsEducCheck?true:false"></switch>
					</view>
				</view>
				<view class="content" v-show="childsEducCheck">
					<view class="margin-bottom-xs text-bold">子女数量：</view>
					<view class="nav margin-bottom-sm">
						<view class="cu-btn sm" :class="0==childsEducTabCur?'bg-green':''" @tap="childsEducTabSelect"
							data-id="0">
							1孩
						</view>
						<view class="cu-btn sm" :class="1==childsEducTabCur?'bg-green':''" @tap="childsEducTabSelect"
							data-id="1">
							2孩
						</view>
						<view class="cu-btn sm" :class="2==childsEducTabCur?'bg-green':''" @tap="childsEducTabSelect"
							data-id="2">
							3孩
						</view>
						<view class="cu-btn sm" :class="3==childsEducTabCur?'bg-green':''" @tap="childsEducTabSelect"
							data-id="3">
							4孩
						</view>
						<view class="cu-btn sm" :class="4==childsEducTabCur?'bg-green':''" @tap="childsEducTabSelect"
							data-id="4">
							5孩
						</view>
					</view>
					<view class="margin-bottom-xs text-bold">扣除方式：</view>
					<view class="nav">
						<view class="cu-btn sm" :class="0==childsEducDeductionType?'bg-green':''" @tap="childsEducDeductionTypeTabSelect"
							data-id="0">
							全部扣除
						</view>
						<view class="cu-btn sm" :class="1==childsEducDeductionType?'bg-green':''" @tap="childsEducDeductionTypeTabSelect"
							data-id="1">
							分摊扣除
						</view>
					</view>
					<view class="margin-top text-grey">
						纳税人的子女接受全日制学历教育的相关支出，按照每个子女每月2000元的标准定额扣除
					</view>
				</view>
			</view>
			
			<view class="bg-white radius-lg collapse margin-top">
				<view class="cu-bar solid-bottom ">
					<view class="action">
						<text class="cuIcon-titles text-green"></text>
						<text class="text-xl text-bold">婴幼儿照护</text>
					</view>
					<view class="action">
						<view class="text-price margin-right text-bold text-xl">{{infantPrice}}</view>
						<switch style="transform:scale(0.9)" @change="switchInfant"
							:class="infantCheck?'checked':''" :checked="infantCheck?true:false"></switch>
					</view>
				</view>
				<view class="content" v-show="infantCheck">
					<view class="margin-bottom-xs text-bold">子女数量：</view>
					<view class="nav margin-bottom-sm">
						<view class="cu-btn sm" :class="0==infantTabCur?'bg-green':''" @tap="infantTabSelect"
							data-id="0">
							1孩
						</view>
						<view class="cu-btn sm" :class="1==infantTabCur?'bg-green':''" @tap="infantTabSelect"
							data-id="1">
							2孩
						</view>
						<view class="cu-btn sm" :class="2==infantTabCur?'bg-green':''" @tap="infantTabSelect"
							data-id="2">
							3孩
						</view>
						<view class="cu-btn sm" :class="3==infantTabCur?'bg-green':''" @tap="infantTabSelect"
							data-id="3">
							4孩
						</view>
						<view class="cu-btn sm" :class="4==infantTabCur?'bg-green':''" @tap="infantTabSelect"
							data-id="4">
							5孩
						</view>
					</view>
					<view class="margin-bottom-xs text-bold">扣除方式：</view>
					<view class="nav">
						<view class="cu-btn sm" :class="0==infantDeductionType?'bg-green':''" @tap="infantDeductionTypeTabSelect"
							data-id="0">
							全部扣除
						</view>
						<view class="cu-btn sm" :class="1==infantDeductionType?'bg-green':''" @tap="infantDeductionTypeTabSelect"
							data-id="1">
							分摊扣除
						</view>
					</view>
					<view class="margin-top text-grey">
						纳税人照护3岁以下婴幼儿子女的相关支出，按照每个婴幼儿每月2000元的标准定额扣除。
					</view>
				</view>
			</view>

			<view class="bg-white radius-lg collapse margin-top">
				<view class="cu-bar solid-bottom ">
					<view class="action">
						<text class="cuIcon-titles text-green"></text>
						<text class="text-xl text-bold">继续教育</text>
					</view>
					<view class="action">
						<view class="text-price margin-right text-bold text-xl">{{continueEducPrice}}</view>
						<switch style="transform:scale(0.9)" @change="switchContinueEduc"
							:class="continueEducCheck?'checked':''" :checked="continueEducCheck?true:false"></switch>
					</view>
				</view>
				<view class="content" v-show="continueEducCheck">
					<view class="margin-bottom-xs text-bold">扣除金额：</view>
					<view class="nav">
						<view class="cu-btn sm" :class="0==continueEducTabCur?'bg-green':''" @tap="continueEducTabSelect"
							data-id="0">
							每月400
						</view>
						<view class="cu-btn sm" :class="1==continueEducTabCur?'bg-green':''" @tap="continueEducTabSelect"
							data-id="1">
							每年3600
						</view>
					</view>
					<view class="margin-top text-grey">
						1. 纳税人在中国境内接受学历（学位）继续教育的支出，在学历（学位）教育期间按照每月400元定额扣除。
						2. 纳税人接受技能人员职业资格继续教育、专业技术人员职业资格继续教育的支出，在取得相关证书的当年，按照3600元定额扣除。
					</view>
				</view>
			</view>
			
			<view class="bg-white radius-lg collapse margin-top">
				<view class="cu-bar solid-bottom ">
					<view class="action">
						<text class="cuIcon-titles text-green"></text>
						<text class="text-xl text-bold">赡养老人</text>
					</view>
					<view class="action">
						<view class="text-price margin-right text-bold text-xl">{{supportElderPrice}}</view>
						<switch style="transform:scale(0.9)" @change="switchSupportElder"
							:class="supportElderCheck?'checked':''" :checked="supportElderCheck?true:false"></switch>
					</view>
				</view>
				<view class="content" v-show="supportElderCheck">
					<view class="margin-bottom-xs text-bold">扣除金额：</view>
					<view class="nav">
						<view class="cu-btn sm" :class="0==supportElderTabCur?'bg-green':''" @tap="supportElderTabSelect"
							data-id="0">
							3000
						</view>
						<view class="cu-btn sm" :class="1==supportElderTabCur?'bg-green':''" @tap="supportElderTabSelect"
							data-id="1">
							1500
						</view>
						<view class="cu-btn sm" :class="2==supportElderTabCur?'bg-green':''" @tap="supportElderTabSelect"
							data-id="2">
							1000
						</view>
						<view class="cu-btn sm" :class="3==supportElderTabCur?'bg-green':''" @tap="supportElderTabSelect"
							data-id="3">
							750
						</view>
						<view class="cu-btn sm" :class="4==supportElderTabCur?'bg-green':''" @tap="supportElderTabSelect"
							data-id="4">
							600
						</view>
					</view>
					<view class="margin-top text-grey">
						<text :class="supportElderTabCur == 0 ? 'text-green' : ''">1. 独生子女，每月3000元定额扣除。</text></br>
						<text :class="supportElderTabCur == 1 ? 'text-green' : ''">2. 非独生子女，两人分摊，每月1500元定额扣除。</text></br>
						<text :class="supportElderTabCur == 2 ? 'text-green' : ''">3. 非独生子女，三人分摊，每月1000元定额扣除。</text></br>
						<text :class="supportElderTabCur == 3 ? 'text-green' : ''">4. 非独生子女，四人分摊，每月750元定额扣除。</text></br>
						<text :class="supportElderTabCur == 4 ? 'text-green' : ''">5. 非独生子女，五人分摊，每月600元定额扣除。</text>
					</view>
				</view>
			</view>
			
			<view class="bg-white radius-lg collapse margin-top">
				<view class="cu-bar solid-bottom ">
					<view class="action">
						<text class="cuIcon-titles text-green"></text>
						<text class="text-xl text-bold">住房租金</text>
					</view>
					<view class="action">
						<view class="text-price margin-right text-bold text-xl">{{rentPrice}}</view>
						<switch style="transform:scale(0.9)" @change="switchRent"
							:class="rentCheck?'checked':''" :checked="rentCheck?true:false"></switch>
					</view>
				</view>
				<view class="content" v-show="rentCheck">
					<view class="margin-bottom-xs text-bold">扣除金额：</view>
					<view class="nav">
						<view class="cu-btn sm" :class="1500==rentTabCur?'bg-green':''" @tap="rentTabSelect"
							data-id="1500">
							1500
						</view>
						<view class="cu-btn sm" :class="1100==rentTabCur?'bg-green':''" @tap="rentTabSelect"
							data-id="1100">
							1100
						</view>
						<view class="cu-btn sm" :class="800==rentTabCur?'bg-green':''" @tap="rentTabSelect"
							data-id="800">
							800
						</view>
					</view>
					<view class="margin-top text-grey">
						<text :class="rentTabCur == 1500 ? 'text-green' : ''">1. 直辖市、省会（首府）城市、计划单列市以及国务院确定的其他城市，每月1500元</text></br>
						<text :class="rentTabCur == 1100 ? 'text-green' : ''">2. 市辖区户籍人口超过100万的城市，每月1100元。</text></br>
						<text :class="rentTabCur == 800 ? 'text-green' : ''">3. 市辖区户籍人口不超过100万的城市，每月800元。</text>
					</view>
				</view>
			</view>
			
			<view class="bg-white radius-lg collapse margin-top">
				<view class="cu-bar solid-bottom ">
					<view class="action">
						<text class="cuIcon-titles text-green"></text>
						<text class="text-xl text-bold">住房贷款利息</text>
					</view>
					<view class="action">
						<view class="text-price margin-right text-bold text-xl">{{loanInterestPrice}}</view>
						<switch style="transform:scale(0.9)" @change="switchLoanInterest"
							:class="loanInterestCheck?'checked':''" :checked="loanInterestCheck?true:false"></switch>
					</view>
				</view>
				<view class="content" v-show="loanInterestCheck">
					<view class="margin-bottom-xs text-bold">扣除金额：</view>
					<view class="nav">
						<view class="cu-btn sm" :class="1000==loanInterestTabCur?'bg-green':''" @tap="loanInterestTabSelect"
							data-id="1000">
							1000
						</view>
						<view class="cu-btn sm" :class="500==loanInterestTabCur?'bg-green':''" @tap="loanInterestTabSelect"
							data-id="500">
							500
						</view>
					</view>
					<view class="margin-top text-grey">
						在实际发生贷款利息的年度，按照每月1000元的标准定额扣除。</br>
						<text :class="loanInterestTabCur == 1000 ? 'text-green' : ''">1. 由购买方按扣除标准的100%扣除。</text></br>
						<text :class="loanInterestTabCur == 500 ? 'text-green' : ''">2. 夫妻双方对各自购买的住房分别按扣除标准的50%扣除。</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { accMul, accAdd, accDiv } from '@/utils/common'
	import {
		appMixin
	} from '@/store/app-mixin'
	export default {
		data() {
			return {
				childsEducCheck: false,
				childsEducTabCur: 0,
				childsEducPrice: 0,
				childsEducDeductionType: 0,
				infantCheck: false,
				infantTabCur: 0,
				infantPrice: 0,
				infantDeductionType: 0,
				continueEducCheck: false,
				continueEducTabCur: 0,
				continueEducPrice: 0,
				supportElderCheck: false,
				supportElderTabCur: 0,
				supportElderPrice: 0,
				rentCheck: false,
				rentTabCur: 1500,
				rentPrice: 0,
				loanInterestCheck: false,
				loanInterestTabCur: 1000,
				loanInterestPrice: 0,
			}
		},
		mixins: [appMixin],
		created() {
			if (this.specialDeductionSelected !== null) {
				 Object.assign(this.$data, this.specialDeductionSelected);
			}
		},
		methods: {
			/**
			 * 子女教育
			 */
			switchChildsEduc(e) {
				this.childsEducCheck = e.detail.value
				this.calcChildsEducPrice()
			},
			childsEducTabSelect(e) {
				this.childsEducTabCur = e.currentTarget.dataset.id;
				this.calcChildsEducPrice()
			},
			childsEducDeductionTypeTabSelect(e) {
				this.childsEducDeductionType = e.currentTarget.dataset.id;
				this.calcChildsEducPrice()
			},
			calcChildsEducPrice() {
				if (this.childsEducCheck === false) {
					this.childsEducPrice = 0;
					this.calcTotalPrice()
					return;
				}
				// 2000 * 子女个数 * 分摊比例(1或0.5)
				this.childsEducPrice = accMul(accMul(2000, accAdd(this.childsEducTabCur, 1)), this.childsEducDeductionType == 0 ? 1 : 0.5)
				this.calcTotalPrice()
			},
			
			/**
			 * 婴幼儿照护
			 */
			switchInfant(e) {
				this.infantCheck = e.detail.value
				this.calcInfantPrice()
			},
			infantTabSelect(e) {
				this.infantTabCur = e.currentTarget.dataset.id;
				this.calcInfantPrice()
			},
			infantDeductionTypeTabSelect(e) {
				this.infantDeductionType = e.currentTarget.dataset.id;
				this.calcInfantPrice()
			},
			calcInfantPrice() {
				if (this.infantCheck === false) {
					this.infantPrice = 0;
					this.calcTotalPrice()
					return;
				}
				// 2000 * 子女个数 * 分摊比例(1或0.5)
				this.infantPrice = accMul(accMul(2000, accAdd(this.infantTabCur, 1)), this.infantDeductionType == 0 ? 1 : 0.5)
				this.calcTotalPrice()
			},
			
			/**
			 * 继续教育
			 */
			switchContinueEduc(e) {
				this.continueEducCheck = e.detail.value
				this.calcContinueEducPrice()
			},
			continueEducTabSelect(e) {
				this.continueEducTabCur = e.currentTarget.dataset.id;
				this.calcContinueEducPrice()
			},
			calcContinueEducPrice() {
				if (this.continueEducCheck === false) {
					this.continueEducPrice = 0;
					this.calcTotalPrice()
					return;
				}
				// 3000 / 子女个数
				this.continueEducPrice = this.continueEducTabCur == 0 ? 400 : 300
				this.calcTotalPrice()
			},
			
			/**
			 * 赡养老人
			 */
			switchSupportElder(e) {
				this.supportElderCheck = e.detail.value
				this.calcSupportElderPrice()
			},
			supportElderTabSelect(e) {
				this.supportElderTabCur = e.currentTarget.dataset.id;
				this.calcSupportElderPrice()
			},
			calcSupportElderPrice() {
				if (this.supportElderCheck === false) {
					this.supportElderPrice = 0;
					this.calcTotalPrice()
					return;
				}
				// 3000 / 子女个数
				this.supportElderPrice = accDiv(3000, accAdd(this.supportElderTabCur, 1))
				this.calcTotalPrice()
			},
			
			/**
			 * 住房租金
			 */
			switchRent(e) {
				this.rentCheck = e.detail.value
				if (this.loanInterestCheck === true &&  this.rentCheck === true) {
					uni.showToast({
						title: "住房贷款利息和住房租金不能同时存在",
						icon: 'none'
					})
					this.loanInterestPrice = 0;
					this.loanInterestCheck = false;
				}
				this.calcRentPrice()
			},
			rentTabSelect(e) {
				this.rentTabCur = e.currentTarget.dataset.id;
				this.calcRentPrice()
			},
			calcRentPrice() {
				if (this.rentCheck === false) {
					this.rentPrice = 0;
					this.calcTotalPrice()
					return;
				}
				this.rentPrice = this.rentTabCur
				this.calcTotalPrice()
			},
			/**
			 * 住房贷款利息
			 */
			switchLoanInterest(e) {
				this.loanInterestCheck = e.detail.value
				if (this.loanInterestCheck === true &&  this.rentCheck === true) {
					uni.showToast({
						title: "住房贷款利息和住房租金不能同时存在",
						icon: 'none'
					})
					this.rentPrice = 0;
					this.rentCheck = false
				}
				this.calcLoanInterestPrice()
			},
			loanInterestTabSelect(e) {
				this.loanInterestTabCur = e.currentTarget.dataset.id;
				this.calcLoanInterestPrice()
			},
			calcLoanInterestPrice() {
				if (this.loanInterestCheck === false) {
					this.loanInterestPrice = 0;
					this.calcTotalPrice()
					return;
				}
				this.loanInterestPrice = this.loanInterestTabCur
				this.calcTotalPrice()
			},
			/**
			 * 计算总金额
			 */
			calcTotalPrice() {
				const sprcialDeductionAmount = accAdd(accAdd(accAdd(accAdd(accAdd(this.childsEducPrice, this.infantPrice), this.continueEducPrice), this.supportElderPrice), this.rentPrice), this.loanInterestPrice)
				this.$store.commit('SET_SPECIAL_DEDUCTION_AMOUNT', sprcialDeductionAmount);
				this.$store.commit('SET_SPECIAL_DEDUCTION_SELECTED', this.$data);
				this.$store.dispatch('calc')
			}
		}
	}
</script>

<style>

</style>